xz.vue
<script setup lang="ts">

</script>

<template>
  <div id="div1">
  </div>
</template>

<style scoped>
#div1 {
  width: 300px;
  height: 200px;
  background: radial-gradient(red, orange, green, blue, gold, paleturquoise);
  border-radius: 20%;
  /*设置边框圆角为20%*/
  border: 10px solid white;
  /*设置10像素宽的白色实线边框*/
  animation: donghua 6s infinite linear;
  /*应用动画效果：
     donghua → 动画名称
     6s → 动画持续时间6秒
     infinite → 无限循环
     linear → 动画速度保持匀速*/
  position: fixed;
  /*使用固定定位，元素位置相对于浏览器窗口固定*/
  top: 600px;
  left: 600px;
}
/*定义名字为动画的关键帧*/
@keyframes donghua {
  0% { transform: translate(0, 0) rotate(0deg) scale(1, 1);
  }
  /*transform: 移动距离 translate(0, 0) 旋转角度rotate(0deg) 放大倍数scale(1, 1);*/
  25% { transform: translate(600px, 0) rotate(720deg) scale(2, 2);
  }
  50% {
    transform: translate(600px, 600px) rotate(1440deg) scale(1, 1);
  }
  75% {
    transform: translate(0, 600px) rotate(2160deg) scale(2, 2);
  }
  100% { transform: translate(0, 0) rotate(2880deg) scale(1, 1);
  }
}
</style>
